<template>
  <div class="my-container w-full h-full">
    <div class="top h-1/6">
      <div class="back" @click="$router.push('/')">
        <img class="w-8 lg:w-12 xl:w-[3vw] ml-4 shrink-0 object-contain cursor-pointer" src="/images/backIcon.png" alt="" @click="back" />
        <span class="shrink-0 ml-2 lg:text-3xl xl:text-[2vw] xl:ml-4 cursor-pointer">返回</span>
      </div>
      <h2 class="text-2xl lg:text-[4vw] xl:text-[3vw] font-bold">左手脉象采集</h2>
    </div>
    <div class="w-full h-5/6 flex justify-center items-center">
      <div class="w-full flex h-full xl:w-5/6">
        <div class="w-1/2 h-full shrink-0">
            <img class="w-full h-full object-contain" src="/images/mai.png" alt="" />
        </div> 
        <div class="w-1/2 words flex flex-col justify-center p-4 lg:p-8 shrink-0">
          <h1 class="text-2xl lg:text-4xl font-bold ">脉诊仪{{ statText }}</h1>
          <p class="my-8 lg:text-2xl lg:my-16">1. 打开脉诊仪电源</p>
          <p class="mb-8 lg:text-2xl lg:mb-16">2. 找到脉搏位置</p>
          <p class="mb-8 lg:text-2xl lg:mb-16">3. 佩戴脉诊仪，并再次确认脉搏处于检测口中间位置</p>
          <div class="my-btn h-[50px] lg:h-[80px] lg:text-2xl" @click="connectBle" v-if="!isConnect">
            <p class="">连接脉诊仪</p>
          </div>
          <div class="my-btn h-[50px] lg:h-[80px] lg:text-2xl" @click="startTest" v-if="isConnect">
            <p v-if="taskStat == 0">开始检测</p>
            <p v-if="taskStat == 1">检测完成</p>
            <p v-if="taskStat == 2">检测中,请等待</p>
            <p v-if="taskStat == 3">上传数据中,请等待</p>
          </div>
        </div>
      </div>
    </div>
    <MyAlert ref="myAlert" />
  </div>
</template>

<script setup>
import { ref, computed, onMounted,watch } from "vue";
import { useRouter } from "vue-router";
import MyAlert from "@/components/alert/index.vue";
import { fetchSetMaiLeft, fetchSetMaiRight } from "@/assets/api/index.js";
import { send2Device, getDevice, searchDevice } from "@/assets/utils/index.js";
const baseUrl = import.meta.env.BASE_URL

const router = useRouter();
const myAlert = ref();

const stat = ref(0);
const taskStat = ref(0);
const isConnect = ref(false);

const statText = computed(() => {
  let textList = ["未连接", "已连接", "连接中..."];
  return textList[stat.value];
});

watch(isConnect,(newVal,oldVal)=>{
  if(newVal){
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/left_mai.mp3'
                audio.muted = false;
                audio.play();
    },200)
  }
})

const sendMaiData = async () => {
  taskStat.value = 3
  let res = await fetchSetMaiLeft({
    data: window.testRes,
  });
  if (res.code !== 0) {
    taskStat.value = 1;
    return myAlert.value.showAlert(res.message);
  }
  setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/left_mai_complate.mp3'
                audio.muted = false;
                audio.play();
    },200)
  taskStat.value = 1;
  router.push("/");
};

// const getStatText = (stat) => {
//     let textList = ["未连接", "已连接", "连接中"];
// }
const connectBLETest = ()=>{
  getDevice(() => {
        stat.value = 1;
        isConnect.value = true;
      })
}
const startTest = () => {
  if (!isConnect.value) {
    return;
  }
  if (taskStat.value == 3 || taskStat.value == 2 || taskStat.value == 1) {
    return;
  }
  taskStat.value = 2;
  send2Device(() => {
    // handleTaskSuc()
    sendMaiData();
  });
};
const handleTaskSuc = () => {
  console.log("脉诊已完成");
  taskStat.value = 1;
};
const connectBle = async () => {
  try {
    if (isConnect.value) {
      stat.value = 2;
      return getDevice(() => {
        stat.value = 1;
        isConnect.value = true;
      });
    }
    stat.value = 2;
    await searchDevice(() => {
      stat.value = 1;
      isConnect.value = true;
    });
  } catch (e) {
    console.log(e);
    stat.value = 0;
    isConnect.value = false;
    myAlert.value.showAlert("连接脉诊仪失败");
  } finally {
    console.log("finally");
  }
};

onMounted(()=>{
  connectBLETest()
})
</script>

<style scoped>
.my-container .top {
  width: 100%;
  height: 15%;
  /* background: white; */
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* color: white; */
}

.top .back {
  width: 20%;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.top .back img {
  width: min(4vw, 40px);
  margin: 0 5px;
  margin-left: 20px;
}

.back span {
  font-size: min(3vw, 30px);
}

.top h2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: min(4vw, 40px);
}

.my-btn {
  cursor: pointer;

  background: linear-gradient(to right, rgb(19, 167, 255), rgb(14, 143, 255));
  /* background: blue; */
  border-radius: 200px;
  border: none;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;

  flex-shrink: 0;
}
</style>
